import React from 'react';
import Header from './components/Header';
import ListBox from './components/ListBox';

class TodoList extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			list: [],
		};
	}

	addItem = val => {
		this.setState({
			list: [...this.state.list, val],
		});
	};

	deleteItem = index => {
		let newList = [...this.state.list];
		newList.splice(index, 1);

		this.setState({
			list: newList,
		});
	};
	render() {
		const { list } = this.state;
		return (
			<div>
				<Header addItem={this.addItem} />
				<ListBox list={list} deleteItem={this.deleteItem} />
			</div>
		);
	}
}
export default TodoList;
